<template>
	<view class="orderForm">
		<!-- 订单信息 -->
		<view class="wzxx">
			<view class="xxs">
				<view>姓名</view>
				<uni-easyinput style="width: 75%;" :clearable="false" :inputBorder="false" v-model="location.name" placeholder="请输入姓名"></uni-easyinput>
				<!-- <uni-data-checkbox selectedColor="#1E9B5E" v-model="location.radio1" :localdata="sex1"></uni-data-checkbox> -->
			</view>
			<view class="xxs">
				<view>联系方式</view>
				<uni-easyinput style="width: 75%;" type="number" :clearable="false" :maxlength=11 :inputBorder="false" v-model="location.lxfs" placeholder="请输入手机号码"></uni-easyinput>
			</view>
		</view>
		<view class="wzxx dzxx">
			<!-- <button type="primary" @tap="chooseLocation">选择位置</button> -->
			<view class="xxs" @tap="chooseLocation('cfd')">
				<view>出发地</view>
				<uni-easyinput style="width: 70%;" disabled :clearable="false" :inputBorder="false" v-model="location.cfd" placeholder="请选择出发地"></uni-easyinput>
				<image style="width: 10px;height: 16px;margin-left: 5px;" mode="widthFix" src="http://cdn.jxsr.com/weizhi.png" />
			</view>
			<view class="xxs" @tap="chooseLocation('mdd')">
				<view>目的地</view>
				<!--  @blur="mddInp" -->
				<uni-easyinput style="width: 70%;" disabled :clearable="false" :inputBorder="false" v-model="location.mdd" placeholder="请选择目的地"></uni-easyinput>
				<image style="width: 10px;height: 16px;margin-left: 5px;" mode="widthFix" src="http://cdn.jxsr.com/weizhi.png" />
			</view>
			<view class="gls" v-if="jsjg">
				<view>距离</view>
				<view style="text-align: right;">约{{distance.kilometre}}公里</view>
			</view>
		</view>
		<view class="wzxx dzxx" v-if="jsjg">
			<view class="gls">
				<view>起步价</view>
				<view style="text-align: right;">{{vehicleInformation.vehicle_price}}元</view>
			</view>
			<view class="gls">
				<view>剩余公里价</view>
				<view style="text-align: right;">约{{distance.syglj}}元</view>
			</view>
			<view class="gls">
				<view>总计</view>
				<view style="text-align: right;">约{{distance.totalPrices}}元</view>
			</view>
		</view>
		<view class="wzxx dzxx">
			<view class="gls" style="height: 30px;">
				<view>用车时间</view>
				<uni-datetime-picker  style="width: 70%;" :start="startTime" :class="distance.serviceTime==''?'timColor':''" type="datetime" :clearIcon="false" v-model="distance.serviceTime" @change="changeLog">
					{{distance.serviceTime==''?'请选择用车时间':distance.serviceTime}}
				</uni-datetime-picker>
			</view>
		</view>
		<view class="commodity">
			<image mode="widthFix"  src="http://cdn.jxsr.com/cls.png" />
			<view class="shops">
				<view class="clxx">
					<view>
						<!-- <span class="sp1">{{clData.licensePlate}}</span> -->
						<span class="sp1">{{vehicleInformation.vehicle_information_name}}</span>
						<!-- <span>{{clData.vehicleColor}}</span> -->
					</view>
					<view>
						<span>车厢长宽高：</span>
						<span>{{vehicleInformation.lasting}}*{{vehicleInformation.wide}}*{{vehicleInformation.high}}米</span>
					</view>
					<!-- <view>
						<span>{{clData.contacts}}</span>
						<span class="sp2">{{clData.telephone}}</span>
					</view> -->
					<view>
						<view>起¥{{vehicleInformation.vehicle_price}}/{{vehicleInformation.starting_kilometers}}km 超¥{{vehicleInformation.mark_up}}/公里</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 支付方式 -->
		<!-- <view class="pays">
			<view class="titles">支付方式</view>
			<view class="zffs">
				<view class="mode" style="-webkit-flex: 1;flex: 1;">
					<view @click="pay(0)">
						<image style="width: 63px;height: 20px;" mode="widthFix" src="http://cdn.jxsr.com/wxzf.png" />
					</view>
					<view @click="pay(3)">
						<image style="width: 17px;height: 20px;" mode="widthFix" src="http://cdn.jxsr.com/ye.png" />
						余额支付
					</view >
				</view>
				<uni-data-checkbox  style="width: 20px;" selectedColor="#1E9B5E" v-model="radio" :localdata="sex"></uni-data-checkbox>
			</view>
		</view> -->
	
		<!-- 提交订单 -->
		<view class="buts">
			<view class="service" @click="$noMultipleClicks(rob)">
				<span class="sp2">提交订单</span>
			</view>
		</view>
	</view>
</template>

<script>
	import { wlplaceOrder,findById,getDistance,wxPayLogistics,balancePayLogistics,xcxWxPayLogistics } from '@/utils/api.js';
	import { getDateTimes,getDatenyr } from '@/utils/date.js';
	export default {
		data() {
			return {
				noClick:true,
				id:'',
				// 当前选择的车辆
				clData:[],
				vehicleInformation:[],
				// 地址信息
				location:{
					id:'1',
					name:'',
					lxfs:'',
					cfd:'',
					mdd:'',
					cfdjc:'',
					mddjc:'',
					cfdjwd:['',''],
					mddjwd:['',''],
					radio1:0,
				},
				sex1: [{
					text:'先生',
					value: 0
				}, {
					text:'女士',
					value: 1
				}],
				
				startTime:'',
				
				buls:true,
				// 支付方式
				radio:0,
				sex: [{
					value: 0
				},
				// {
				// 	value: 1
				// }, {
				// 	value: 2
				// },
				{
					value: 3
				}],
				
				jsjg:false,
				distance:{
					kilometre:0,
					syglj:0,
					totalPrices:0,
					serviceTime:''
				},
				
				orderInfo:{},
			}
		},
		onLoad(e){
			// console.log(e);
			if(e.id){
				this.id = e.id;
				this.vehicleInformation=JSON.parse(decodeURIComponent(e.data))
				this.startTime=getDateTimes()
				// console.log(this.vehicleInformation);
				// this.ddxx.zj=this.store.logistics_status * this.ddxx.gs
				
			}
			// this.clDetails()
		},
		methods: {
			chooseLocation(xx){
				let _this=this
				uni.chooseLocation({
					success: (res) => {
						// console.log(res);
						if(xx == 'cfd'){
							_this.location.cfd=res.address
							_this.location.cfdjc=res.name
							_this.location.cfdjwd[0]=res.longitude
							_this.location.cfdjwd[1]=res.latitude
							_this.mddInp()
						}else if(xx == 'mdd'){
							_this.location.mdd=res.address
							_this.location.mddjc=res.name
							_this.location.mddjwd[0]=res.longitude
							_this.location.mddjwd[1]=res.latitude
							_this.mddInp()
						}
						
					}
				})
			},
			// // 获取数据
			// clDetails(){
			// 	// 获取车辆信息数据
			// 	findById({
			// 		id:this.id
			// 	}).then((res) => {
			// 	    if (res.code === 200) {
			// 	      // console.log(res);
			// 		  this.clData=res.data
			// 		  this.vehicleInformation=res.data.vehicleInformation
			// 	    } else {
			// 	      uni.showToast({title:"请求错误", position: 'bottom'})
			// 	    }
			// 	}).catch((err) => {
			// 		uni.showToast({title:'网络繁忙', position: 'bottom'})
			// 	});
			// },
			// 支付方式
			pay(val){
				this.radio=val
				this.buls=true
				if(val == 1 || val == 2){
					uni.showToast({title:"暂未开通", position: 'bottom',icon:'none'})
					this.buls=false
				}
			},
			// 点击支付方式圆点
			checkboxChange(e){
				this.radio=e.detail.value
				this.buls=true
				if(e.detail.value == 1 || e.detail.value == 2){
					uni.showToast({title:"暂未开通", position: 'bottom',icon:'none'})
					this.buls=false
				}
			},
			changeLog(e) {
				// console.log('----change事件:', e);
				this.distance.serviceTime=e
				// console.log(this.distance.serviceTime);
			},
			// 计算距离
			mddInp(){
				if(this.location.cfd !=='' && this.location.mdd !==''){
					// console.log(this.location.cfdjwd.join());
					// console.log(this.location.mddjwd.join());
					// 查询物流起始距离
					getDistance({
						startLonLat:this.location.cfdjwd.join(),
						endLonLat:this.location.mddjwd.join()
					}).then((res) => {
						// console.log(res);
					    if (res.code === 200) {
							this.jsjg=true
					      // console.log(this.vehicleInformation);
						  this.distance.kilometre=Math.ceil(res.data/1000)
						  if(this.distance.kilometre <= this.vehicleInformation.starting_kilometers){
							  // let sygls=Math.ceil(this.distance.kilometre - this.vehicleInformation.startingKilometers)
							  // console.log(sygls * this.vehicleInformation.mark_up);
							  this.distance.syglj=0
							  this.distance.totalPrices=this.vehicleInformation.vehicle_price + this.distance.syglj
						  }else{
							  let sygls=Math.ceil(this.distance.kilometre - this.vehicleInformation.starting_kilometers)
							  // console.log(sygls * this.vehicleInformation.mark_up);
							  this.distance.syglj=sygls * this.vehicleInformation.mark_up
							  this.distance.totalPrices=this.vehicleInformation.vehicle_price + this.distance.syglj
						  }
						  
					    } else {
					      uni.showToast({title:"出发地或目的地有误", position: 'bottom',icon:'none'})
					    }
					}).catch((err) => {
						uni.showToast({title:'网络繁忙', position: 'bottom',icon:'none'})
					});
				}else{
					this.jsjg=false
				}
			},
			// 提交订单
			rob(){
				// if(!this.buls){
				// 	uni.showToast({title:'暂不支持当前支付方式！', position: 'bottom',icon:'none'})
				// }else 
				let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if(this.location.name ==''){
					uni.showToast({title:"姓名不能为空", position: 'bottom',icon:'none'})
				}else if(this.location.lxfs ==''){
					uni.showToast({title:"联系方式不能为空", position: 'bottom',icon:'none'})
				}else if(!myreg.test(this.location.lxfs)){
					uni.showToast({title:"请输入正确的联系方式", position: 'bottom',icon:'none'})
				}else if(this.location.dz ==''){
					uni.showToast({title:"出发地不能为空", position: 'bottom',icon:'none'})
				}else if(this.location.xxdz ==''){
					uni.showToast({title:"目的地不能为空", position: 'bottom',icon:'none'})
				}else if(this.distance.kilometre ==0){
					uni.showToast({title:"请选择正确的出发地和目的地", position: 'bottom',icon:'none'})
				}else if(this.distance.serviceTime ==''){
					uni.showToast({title:"请选择用车时间", position: 'bottom',icon:'none'})
				}else{
					// uni.showModal({
					// 	content: "您确定要提交订单吗？",
					// 	confirmText: "确定",
					// 	cancelText: "取消",
					// 	success: function (res) {
					// 		if (res.confirm) {
								// console.log('用户点击确定');
								uni.showLoading({
									mask:true
								})
								// 提交物流订单
								wlplaceOrder({
									vehicleInformationId:this.id,
									number:1,
									contacts:this.location.name,
									telephone:this.location.lxfs,
									startAddress:this.location.cfdjc,
									destination:this.location.mddjc,
									startingPoint:this.location.cfdjwd.join(),
									end:this.location.mddjwd.join(),
									kilometers:this.distance.kilometre,
									takesTime:this.distance.serviceTime
								}).then((res) => {
									// console.log(res);
								    if (res.code === 200) {
								      // console.log(res);
									  // _this.orderInfo=res.data
									  uni.showToast({title:"订单已提交", position: 'bottom',icon:'none'})
									  setTimeout(() => {
									  	uni.hideLoading()
									  	uni.navigateTo({
									  		url: '/pages/my/indent/indent'
									  	})
									  }, 1000);
									  // if(_this.radio == 0){
									  // 	// console.log('微信');
									  // 	// #ifdef APP-PLUS
									  // 	_this.wxPayLogistics(_this.orderInfo)
									  // 	// #endif
									  // }else if(_this.radio == 3){
									  // 	_this.balancePayLogistics(_this.orderInfo)
									  // }
									  									  
									  									  
									  // // #ifdef H5
									  // uni.showToast({title:"请在手机app支付", position: 'bottom'})
									  // setTimeout(() => {
									  // 	uni.hideLoading()
									  // 	uni.navigateBack({delta: 1})
									  // }, 1000);
									  // // #endif
								    } else {
								      uni.showToast({title:res.message?res.message:"请求错误", position: 'bottom',icon:'none'})
								    }
								}).catch((err) => {
									uni.showToast({title:'网络繁忙', position: 'bottom',icon:'none'})
								});
					// 		} else if (res.cancel) {
					// 			console.log('用户点击取消');
					// 		}
					// 	}
					// })
				}
			},
			
			// 微信支付
			wxPayLogistics(orderInfo){
				// 微信支付
				xcxWxPayLogistics({
					orderNumber:this.orderInfo.orderNumber
				}).then((res) => {
				    if (res.code === 200) {
						// console.log(res.data);
						this.requestPayment(res.data,"wxpay")
				    } else {
				      uni.showToast({title:res.message, position: 'bottom'})
				    }
				}).catch((err) => {
					uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			// 支付
			requestPayment(e,zflx) {
			    let orderInfo = e;
			    // console.log("得到订单信息", orderInfo,zflx);
			    // uni.requestPayment({
			    //     provider: zflx,
			    //     orderInfo: orderInfo,
			    //     success: (e) => {
			    //         // console.log("success", e);
			    //         uni.showToast({
			    //             title: "支付成功!"
			    //         })
			    //     },
			    //     fail: (e) => {
			    //         console.log("fail", e);
			    //         uni.showModal({
			    //             content: "支付失败",
			    //             showCancel: false
			    //         })
			    //     },
			    //     complete: () => {
			    //         setTimeout(() => {
			    //         	uni.hideLoading()
			    //         	uni.navigateBack({delta: 1})
			    //         }, 1000);
			    //     }
			    // })
				
				
				
				uni.requestPayment({
				    provider: 'wxpay',
				    timeStamp: orderInfo.timeStamp,
				    nonceStr: orderInfo.nonceStr,
				    package: orderInfo.package,
				    signType: 'MD5',
				    paySign: orderInfo.paySign,
					success: function (res) {
						// console.log(res);
						uni.hideLoading()
						uni.showToast({
						    title: "支付成功!"
						})
					},
					fail: function (err) {
						// console.log(err);
						uni.hideLoading()
						uni.showModal({
						    content: "支付失败",
						    showCancel: false
						})
					},
				    complete: () => {
				        setTimeout(() => {
				        	uni.hideLoading()
				        	uni.navigateBack({delta: 1})
				        }, 1000);
				    }
				});
			},
			// 余额支付
			balancePayLogistics(orderInfo){
				// 余额支付
				balancePayLogistics({
					orderNumber:this.orderInfo.orderNumber
				}).then((res) => {
				    if (res.code === 200) {
						// console.log(res);
						uni.showToast({
						    title: "支付成功!"
						})
						setTimeout(() => {
							uni.hideLoading()
							uni.navigateBack({delta: 1})
						}, 1000);
				    } else {
				      uni.showToast({title:res.message, position: 'bottom'})
				    }
				}).catch((err) => {
					uni.showToast({title:'网络繁忙', position: 'bottom'})
				});
			},
			
			
		}
	}
</script>

<style scoped lang="scss">
	.orderForm{
		// width: 100%;
		padding: 8px 10px;
		.wzxx{
			padding: 10px;
			background: #FFFFFF;
			border-radius: 10px;
			margin-bottom: 10px;
			.xxs{
				// height: 50px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				view{
					width: 80px;
					font-size: 15px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: $mainText;
					line-height: 50px;
					
				}
				image{
					width: 8px;
					height: 14px !important;
				}
				.uni-easyinput__placeholder-class{
					font-size: 16px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
				.uni-input-input{
					font-size: 16px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
				}
				::v-deep .is-disabled{
					background-color: #FFFFFF !important;
					color: #000;
				}
				::v-deep .uni-data-checklist{
					height: 100%;
					.checklist-group{
						height: 100%;
						display: flex;
						justify-content: space-between;
						.checklist-box{
							margin: 0;
						}
					}
				}
			}
			.gls{
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				view{
					font-size: 15px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: $mainText;
					line-height: 50px;
				}
				image{
					width: 8px;
					height: 14px !important;
				}
				.timColor{
					color: #999999;
				}
			}
		}
		// .dzxx{
		// 	.xxs{
		// 		::v-deep .uni-easyinput{
		// 			.uni-easyinput__content{
		// 				.uni-easyinput__content-input{
		// 					.uni-input-wrapper{
		// 						.uni-input-input{
		// 							text-align: right;
		// 						}
		// 					}
		// 				}
		// 			}
		// 		}
		// 	}
		// }
		.commodity{
			padding: 10px;
			background: #FFFFFF;
			border-radius: 10px;
			margin-bottom: 100px;
			display: flex;
			align-items: center;
			image{
				width: 100px;
				height: 100px;
				margin: 10px;
				border-radius: 8px;
			}
			.shops{
				-webkit-flex: 1;
				flex: 1;
				height: 100px;
				padding-right: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.clxx{
					height: 64px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					view{
						font-size: 14px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: $text;
						line-height: 17px;
						.sp1{
							font-size: 18px;
							font-weight: 600;
							color: $mainText;
							line-height: 22px;
						}
						.sp2{
							margin: 0 6px;
						}
					}
					
				}
			}
			
		}
		.pays{
			padding: 0 10px 10px 10px;
			margin-bottom: 100px;
			background: #FFFFFF;
			border-radius: 10px;
			.titles{
				font-size: 18px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: $mainText;
				line-height: 50px;
			}
			.zffs{
				height: 150px;
				display: flex;
				justify-content: space-between;
				.mode{
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					view{
						display: flex;
						align-items: center;
						image{
							margin-right: 10px;
						}
					}
				}
				::v-deep .uni-data-checklist{
					flex: 0;
					height: 100%;
					.checklist-group{
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						.checklist-box{
							margin: 0;
						}
					}
				}
			}
		}
		.buts{
			width: 100%;
			height: 56px;
			position: fixed;
			bottom: 5%;
			.service{
				width: 95%;
				height: 56px;
				background: linear-gradient(232deg, #B9D378 0%, #1B9A5D 100%);
				box-shadow: 0px 0px 10px 0px rgba(33, 156, 94, 0.5);
				border-radius: 28px;
				display: flex;
				justify-content: center;
				align-items: center;
				.sp2{
					font-size: 18px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 56px;
					padding: 0 5px;
				}
			}
		}
	}
</style>
